
<!DOCTYPE html>
<html lang="zh-CN" ng-app>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">


    <title>AAA订座</title>
    <!-- Bootstrap core CSS -->
    <link href="/libs/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/libs/dashboard.css" rel="stylesheet">
    <script type="text/javascript" src="/libs/angular.js"></script>

    <style type="text/css">
    table {
		width: 1000px;
		margin: 50px auto;
		border-collapse: collapse;
		table-layout: fixed;
	}
	td {
		border: 1px solid #666;
		height: 60px;
		text-align: center;
		line-height: 60px;
		position: relative;
	}
	.isSelected {
		background-color: pink !important;
	}

	.seat {
		background-color: #449d44;
	}
	.teacher {
		background-color: #31b0d5;
	}
	.guodao {
		background-color: #ec971f;
	}
	ul.youji {
		position: absolute;
		width: 200px;
		left: 0;
		top: 0;
		display: none;
		background-color: #fff;
		border: 1px solid #ccc;
	}

	ul.youji li {
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		text-align: center;
		cursor: pointer;

	}
	ul.youji li:hover {
		background-color: pink;
	}

	.table1 input {
		width: 100px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		outline: none;
	}
	* {
		margin: 0;
		padding: 0;
		list-style: none;
		/*vertical-align: */
	}
	.table1 td span {
		position: absolute;
		font-size: 20px;
		right: 5px;
		width: 20px;
		height: 20px;
		line-height: 20px;
		bottom: 5px;
		cursor: pointer;
	}
	.table1 td a {
		position: absolute;
		right: 10px;
		bottom: 0;
		height: 30px;
		line-height: 30px;
		display: none;
		text-decoration: none;
		font-size: 14px;
		color: #000;
  		font-weight: bold;
	}
	input,select {
		outline: none;
	}
	.table1 .bianji {
		display: none;
		width: 100px;
		margin: 0 auto;
	}
	.table1 i {
		font-style: normal;
		font-size: 20px;
	
	}
	i.isself {
		color: #ccc;
	}
	.edit {
		display: none;
		margin-top: 10px;
	}
	#edit {
		margin-top: 10px;
	}
    </style>
   
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">AAA订座系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
          	<li><a href="/">首页</a></li>
            <li><a href="javascript:;">欢迎你,<%= username %></a></li>
            <li><a href="/loginout">退出登录</a></li>
            
          </ul>
            <div ng-show="<%= manger ? true : false %>">
               <form action="/search" class="navbar-form navbar-right">
                  <input type="text" name="name" class="form-control" placeholder="Search...">
              </form>
            </div>
          
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li><a href="/create">创建班级</a></li>
            <li class="active"><a href="/detail?act=m">位置管理</a></li>
            <li><a href="/allClass">班级管理</a></li>
            <li><a href="/quanxian?name=<%= username %>" onclick="quanxian()" ng-show="<%= username== 'admin' ? true : false;%>">权限管理</a></li>
          </ul>
       
         
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <div class="jumbotron">
        		
			<% if (err) { %>
					<h2>对不起,没有该班级</h2>
				<% } else { %>

	<% if (isShow) { %>
		<form action="/detail" class="form-inline">
			<input type="hidden" name="act" value="m">
			<select name="cNo" id="cNo" class="form-control">
				<% for (var i = 0;i < classArr.length;i++) { %>
				<option value="aaa<%= classArr[i] %>"  ng-selected="<%= cNo == 'aaa'+classArr[i] ? true : false %>"><%= classArr[i] %></option>
				<%}%>
			</select>
			<input type="submit" class="btn btn-default" value="查看">
		</form>
	<%}%>
				
			<table class="table1">
		<% if (datas.length) { %>
			<% if (isShow) { %>
				<input type="button" class="btn btn-default" value="启动编辑模式" id="edit">
			<%}%>
			<div class="edit">
					<a href="javascript:;" id="save" class="btn btn-success">保存</a>
					<a href="javascript:;" id="cancelEdit" class="btn btn-info">取消编辑</a>
				</div>
			<% var rows = datas[0].rows; %>
			<% var cols = datas[0].cols; %>
			<% for (var j = 0;j < rows;j++) { %>
				<tr>
				<% for (var m = 0;m < cols;m++) { %>
					
					<% var l = cols * j + m; %>
					<td class="<%= datas[l].stu ? 'seat' : '' %> <%= datas[l].teacher ? 'teacher' : '' %> <%= datas[l].guodao ? 'guodao' : '' %>"><i class="name <%= username == datas[l].sName ? 'isself' : '' %>"><%= datas[l].sName %><%= datas[l].tName %></i><div class="bianji"><input type="text"></div><a href="javascript:;">编辑</a></td>
				<% } %>
				</tr>
			<% } %>
		<% }%>
	</table>
		<% } %>
			<ul class="youji">
				<li>添加</li>
				<li>教师机</li>
				<li>删除</li>
				<li>过道</li>
				<li>取消选中</li>
			</ul>
		</div>
          
      </div>
    </div>

  </body>
</html>
<script type="text/javascript" src="/libs/jquery-3.2.1.js"></script>
<script type="text/javascript">
	var dataArr = [];
	var oldArr = [];
	// 选择
	$('select').change(function () {
		$('#edit').hide();
		$('.edit').hide();
	});
	// 编辑模式
	$('#edit').click(function () {
		$('.edit').show();
		$.eventAdd();
	});

	// 取消编辑
	$('#cancelEdit').click(function () {
		this.href = '/detail?act=m&cNo='+$('#cNo')[0].value;
	});
	// 数据产生
	$.extend({
		eventAdd: function () {
			// 选中单元格
			$('.table1 td').click(function () {
				
				$(this).toggleClass('isSelected');
				
			});

			$('.table1 td a').click(function () {
				if ($(this).parent().hasClass('seat') || $(this).parent().hasClass('teacher')) {
					$(this).parent().children('.name').hide();
					$(this).prev().show();
					$(this).prev().children('input').val($(this).parent().children('.name').html());
					$(this).hide();
				} else {
					alert('只有定位的学员和教师机才能编辑');
				}
				
				return false;
			});
			// 关闭
			// $('.bianji span').click(function () {
			// 	$(this).parent().hide();
			// 	$(this).parent().next().show();
			// 	$(this).prev().val('');
			// 	$(this).parent().parent().children('.name').show();
			// 	return false;
			// });

			// 鼠标移入显示编辑按钮
			$('.table1 td').hover(function () {
				var flag =  $(this).hasClass('seat') || $(this).hasClass('teacher');
				if ($(this).children('.bianji').css('display') == 'none' && flag) {
					$(this).children('a').show();
				}
				
			},function () {
				$(this).children('a').hide();
			});

			$('.table1 .bianji input').click(function () {
				return false;
			});
			// 编辑失去焦点
			$('.table1 .bianji input').blur(function () {
						$(this).parent().hide();
				$(this).parent().parent().children('.name').show();
				if ($(this).val()) {
					$(this).parent().parent().children('.name').html($(this).val());
				}

				$(this).val('');

			});
			// 编辑里面点击确定
			$('.table1 .bianji input').keydown(function (ev) {
				if (ev.keyCode == 13) {
					$(this).parent().hide();
					$(this).parent().parent().children('.name').show();
					if ($(this).val()) {
						$(this).parent().parent().children('.name').html($(this).val());
					}
					$(this).val('');
				}
				
			});

			// 右击显示菜单
			$('.jumbotron').on('contextmenu',function (ev) {

				$('ul.youji').show();

				$('ul.youji').css({left: ev.clientX - $('.jumbotron').offset().left,top: ev.clientY - $('.jumbotron').offset().top});

				

				return false;
			});
			// 隐藏选项
			$(document).click(function () {
				$('ul.youji').hide();
			});

			var all = 'isSelected seat teacher guodao';

			$('ul li').click(function () {
				// 添加
				if ($(this).index() == 0) {
					$.menu('seat');
				}
				// 教师机
				if ($(this).index() == 1) {
					$.menu('teacher');
				}
				// 取消订位/教师机
				if ($(this).index() == 2) {
					$('.table1 td').each(function () {
						if ($(this).hasClass('isSelected')) {
							$(this).removeClass(all);
							$(this).children('.name').html('');
						}
					});
				}
				// 过道
				if ($(this).index() == 3) {
					$.menu('guodao');
				}
				// 取消选中
				if ($(this).index() == 4) {
					$('.table1 td').removeClass('isSelected');
				}
			});

			// 添加类名
			$.extend({
				menu: function (name) {
					$('.table1 td').each(function () {
						if ($(this).hasClass('isSelected')) {
							console.log(1);
							$(this).removeClass(all).addClass(name);
							$(this).children('.name').html('');
						}
					});
				}
			});
		},
		createData: function () {
				$('.table1 tr').each(function () {
				var zIndex = $(this).index();
				var l = $(this).children().length;
				$(this).children().each(function () {
					// 表格下标
					var sIndex = zIndex * l + $(this).index();

					// 数据还原
					for (var key in oldArr[sIndex]) {
							dataArr[sIndex][key] = oldArr[sIndex][key];	 
						}
					// 是否显示

					// 是否为添加
					if ($(this).hasClass('seat')) {
						
						dataArr[sIndex].sName = $(this).children('.name').html();
						dataArr[sIndex].stu = 1;

					}
					// 是否为教师机
					if ($(this).hasClass('teacher')) {
						
						dataArr[sIndex].tName = $(this).children('.name').html();
						dataArr[sIndex].teacher = 1;
					}

					// 是否为过道
					if ($(this).hasClass('guodao')) {
						
						dataArr[sIndex].sName = $(this).children('.name').html();
						dataArr[sIndex].guodao = 1;
					}

				});
			});

			return dataArr;
		}
	});

	// 保存
	$('#save').click(function () {
		dataArr = [];
		oldArr = [];
		$.ajax({
			url: '/getData',
			data: {cNo: $('#cNo')[0].value},
			success: function (s) {
				
				if (!s.err) {
					dataArr = s.data;
					$.each(s.data,function (i,ele) {
						oldArr.push(ele);
					});

					$.createData();
				
					$.each(dataArr,function (i,ele) {
						ele.cNo = $('#cNo').val();
						$.ajax({
							url: '/update',
							data: ele,
							success: function (aa) {
								console.log(aa);
								if (!aa.err) {
									location.href =  '/detail?act=m&cNo='+$('#cNo')[0].value;
								} else {
									alert(aa.msg);
								}
							}
						});
					});
							
				
				}
			}
		});
		
		
	});
</script>